<template>
	<view class="content">
		<view class="status-bar"></view>
		<view class="user-wrap">
			<view class="user-avatar" @click="openWin('avatar')">
				<image class="avatar" :src="getAvatarUrl(myInfo.avatar)" mode="aspectFill"></image>
				<view v-if="myInfo.is_avatar == 0">
					<view class="checking">
						<text>审核中</text>
					</view>
				</view>
				<view v-if="myInfo.is_avatar == 2">
					<view class="checking">
						<text>未通过</text>
					</view>
				</view>
			</view>
			<view class="user-info" @click="openUserHome">
				<view class="name">
					<text class="name-text">{{myInfo.name}}</text>
					<template v-if="myInfo.vip == 1">
						<image class="vip-icon" src="../../static/img/vip_icon.png" mode=""></image>
					</template>
					<template v-if="myInfo.type == '1'">
						<!-- <text v-if="myInfo.sex == '1'" class="role">{{myInfo.trump=='1'?'王牌':''}}月老</text>
						<text v-if="myInfo.sex == '2'" class="role">{{myInfo.trump=='1'?'王牌':''}}红娘</text> -->
						<text class="role">{{myInfo.trump=='1'?'王牌':''}}主持人</text>
					</template>
				</view>
				<view class="info">
					<view :class="['sex-wrap', 'sex' + myInfo.sex]">
						<image class="sex-icon" :src="'/static/img/sex' + myInfo.sex + '.png'" mode=""></image>
						<text class="age">{{myInfo.age}}</text>
					</view>
					<template v-if="myInfo.city">
						<view class="city-wrap">
							<image class="city-icon" src="/static/img/location1.png" mode=""></image>
							<text class="city">{{myInfo.adname!=""?myInfo.adname:myInfo.city}}</text>
						</view>
					</template>
				</view>
				<view class="id">ID: {{myInfo.lid}}</view>
			</view>
			<view class="uni-icon uni-icon-arrowright"></view>
		</view>
		<view class="authWrapSuperior">
			<view class="auth-wrap">
				<view :class="['auth-item', !!myInfo.tel && myInfo.tel.length == 11 ? 'active' : '']" @click="openWin('auth_phone')">
					<image class="auth-icon" :src="!!myInfo.tel && myInfo.tel.length == 11?'/static/img/auth_icon1_1.png':'/static/img/auth_icon1_0.png'" mode=""></image>
					<text>手机认证</text>
				</view>
				<view :class="['auth-item', !!myInfo.video && myInfo.video.enabled == 1 ? 'active' : '']" @click="openWin('auth_video')">
					<image class="auth-icon" :src="!!myInfo.video && myInfo.video.enabled == 1?'/static/img/auth_icon2_1.png':'/static/img/auth_icon2_0.png'" mode=""></image>
					<text v-if="myInfo.video">
						<text v-if="myInfo.video.enabled==0">视频审核中</text>
						<text v-if="myInfo.video.enabled==2">视频认证失败</text>
						<text v-if="myInfo.video.enabled==1">视频认证</text>
					</text>
					<text v-else>视频认证</text>
				</view>
				<view :class="['auth-item', !!myInfo.idcard ? 'active' : '']" @click="openWin('auth_name')">
					<image class="auth-icon" :src="!!myInfo.idcard?'/static/img/auth_icon3_1.png':'/static/img/auth_icon3_0.png'" mode=""></image>
					<text>实名认证</text>
				</view>
			</view>
		</view>
		<view class="authWrapSuperior">
			<view class="menu-list">
				<view class="menu-item" @click="openWin('dynamics')">
					<image class="menu-icon" src="/static/img/my_menu1.png" mode=""></image>
					<view class="label">我的动态</view>
					<view class="value red">{{myInfo.dynamic_count}}条动态</view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view>
				<view class="menu-item" @click="openWin('album')">
					<image class="menu-icon" src="/static/img/my_menu11.png" mode=""></image>
					<view class="label">我的相册</view>
					<view class="value"></view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view>
				<view class="menu-item" @click="openWin('info')">
					<image class="menu-icon" src="/static/img/my_menu2.png" mode=""></image>
					<view class="label">基本资料</view>
					<view class="value">{{myInfo | isInfo}}</view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view>
				<view class="menu-item" @click="openWin('requirement')" v-if="!ish">
					<image class="menu-icon" src="/static/img/my_menu3.png" mode=""></image>
					<view class="label">征友条件</view>
					<view class="value">{{myInfo | isRequirement}}</view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view>
				<!-- <view class="menu-item" @click="openWin('tag')">
					<image class="menu-icon" src="/static/img/my_menu4.png" mode=""></image>
					<view class="label">我的标签</view>
					<view class="value">{{myInfo | isTag}}</view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view> -->
				<view class="menu-item" @click="openWin('rose')" v-if="!ish">
					<image class="menu-icon" src="/static/img/mili1.png" mode=""></image>
					<view class="label">我的米币</view>
					<view class="value red">{{myInfo.rose}}</view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view>
				<view class="menu-item" @click="openWin('vip')" v-if="!ish">
					<image class="menu-icon" src="/static/img/my_menu6.png" mode=""></image>
					<view class="label">VIP会员</view>
					<view class="value red">查看特权</view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view>
				<view class="menu-item" @click="openWin('wallet')" v-if="!ish">
					<image class="menu-icon" src="/static/img/my_menu7.png" mode=""></image>
					<view class="label">我的钱包</view>
					<view class="value"></view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view>
				<view class="menu-item" @click="openWin('share')" v-if="!ish">
					<image class="menu-icon" src="/static/img/my_menu8.png" mode=""></image>
					<view class="label">邀请奖励</view>
					<view class="value red">邀请得奖励</view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view>
				<!-- <view class="menu-item" @click="openWin('kefu')">
					<image class="menu-icon" src="/static/img/my_menu10.png" mode=""></image>
					<view class="label">在线客服</view>
					<view class="value"></view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view> -->
				<view class="menu-item" @click="openWin('setting')">
					<image class="menu-icon" src="/static/img/my_menu9.png" mode=""></image>
					<view class="label">设置</view>
					<view class="value"></view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ish:false,  //是否隐藏
				myInfo: {
					id: '',
					lid: '',
					name: '',
					avatar: '',
					sex: '',
					age: '',
					pname: '',
					city: '',
					tel: '',
					video: null,
					idcard: '',
					dynamic_count: 0,
					rose: '0',
					occupation: '',
					is_request: null,
					tag: '',
					type: '',
					is_avatar:1,
				},
				configInfo: {
					IMSDKAPPID: '23',
					IDBEFORE: '',
					ShareBg: '',
				},
			}
		},
		onLoad(options) {
			const hiddenInfo = uni.getStorageSync('isHidden');
			if(hiddenInfo.isHidden=="1"){
				this.ish=true;
			}
			uni.$on('my-page', data => {
				if (data.type == 'update') {
					this.getUserIndex();
				}
			})
		},
		onUnload() {
			uni.$off('my-page');
		},
		onReady() {
			this.getUserIndex();
		},
		onShow() {
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					Object.assign(this.myInfo, myInfo);
				}
				const configInfo = uni.getStorageSync('configInfo');
				if (configInfo) {
					this.configInfo = configInfo
				}
				
			} catch (e) {
				console.log(e)
			}
		},
		onHide() {
			
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getUserIndex();
			}, 500)
		},
		methods: {
			getUserIndex: function () {
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.UserIndex',
					uid: this.myInfo.id,
					token: this.myInfo.token,
				}, res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					console.log('用户信息',res.data)
					if (res.status) {
						this.myInfo.name = res.data.name;
						this.myInfo.avatar = res.data.avatar;
						this.myInfo.is_avatar = res.data.is_avatar;
						this.$set(this.myInfo,'is_avatar',res.data.is_avatar);
						this.myInfo.tel = res.data.tel + '';
						this.myInfo.age = res.data.age;
						this.myInfo.vip = res.data.vip;
						this.myInfo.vip_time = res.data.vip_time;
						this.myInfo.city = !!res.data.city ? res.data.city : '';
						this.myInfo.pname = !!res.data.pname ? res.data.pname : '';
						this.myInfo.adname = !!res.data.adname ? res.data.adname : '';
						this.myInfo.dynamic_count = res.data.dynamic_count;
						this.myInfo.rose = res.data.rose;
						this.myInfo.idcard = res.data.idcard;
						this.myInfo.video = res.data.video;
						this.myInfo.tag = res.data.tag;
						this.myInfo.like_tag = !!res.data.like_tag ? res.data.like_tag : '';
						this.myInfo.is_request = res.data.is_request;
						this.myInfo.height = !!res.data.height ? res.data.height : '';
						this.myInfo.education = !!res.data.education ? res.data.education : 0;
						this.myInfo.income = !!res.data.income ? res.data.income : 0;
						this.myInfo.think = !!res.data.think ? res.data.think : '';
						this.myInfo.wechat = !!res.data.wechat ? res.data.wechat : '';
						this.myInfo.marriage = !!res.data.marriage ? res.data.marriage : 0;
						this.myInfo.occupation = res.data.occupation;
						this.myInfo.house = !!res.data.house ? res.data.house : 0;
						this.myInfo.charm = !!res.data.charm ? res.data.charm : 0;
						this.myInfo.blood = !!res.data.blood ? res.data.blood : 0;
						this.myInfo.place = !!res.data.place ? res.data.place : 0;
						this.myInfo.cohabitation = !!res.data.cohabitation ? res.data.cohabitation : 0;
						this.myInfo.type = res.data.type
						this.myInfo.trump = res.data.trump
						
						
						uni.setStorage({
							key: 'myInfo',
							data: this.myInfo,
							success: function() {
								console.log('myInfo信息更新');
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			
			openUserHome: function () {
				let user = {
					id: this.myInfo.id,
					name: this.myInfo.name,
					avatar:this.myInfo.avatar
				}
				uni.navigateTo({
					url: '../home/user_home?user=' + JSON.stringify(user)
				})
			},
			
			openWin: function (url) {
				if (url == 'auth_phone' && !!this.myInfo.tel && this.myInfo.tel.length == 11 ) {
					uni.showToast({
						title: '已手机认证',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (url == 'auth_video' && !!this.myInfo.video && this.myInfo.video.enabled == 1 ) {
					uni.showToast({
						title: '已视频认证',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (url == 'auth_video' && !!this.myInfo.video && this.myInfo.video.enabled == 0 ) {
					uni.showToast({
						title: '视频审核中',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (url == 'auth_name' && !!this.myInfo.idcard ) {
					uni.showToast({
						title: '已实名认证',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (url == 'avatar' && this.myInfo.is_avatar == 0 ) {
					uni.showToast({
						title: '头像正在审核中',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (url == 'share') {
					uni.showLoading({
						title: ''
					})
					uni.navigateTo({
						url: url + '?bg=' + encodeURIComponent(this.configInfo.ShareBg)
					})
					// uni.downloadFile({
					// 	url: this.configInfo.ShareBg,
					// 	success: res => {
					// 		uni.hideLoading();
					// 		console.log('跳转fanhui====',res)
					// 		if (res.statusCode === 400) {
								
					// 		}
					// 	}
					// });
					return false;
				}
				let userinfo = {
					id: this.myInfo.id,
					name: this.myInfo.name,
					token: this.myInfo.token
				}
				if (url == 'avatar') {
					userinfo.avatar = this.myInfo.avatar;
				}
				if (url == 'info') {
					userinfo.think = this.myInfo.think;
					userinfo.wechat = this.myInfo.wechat;
					userinfo.age = this.myInfo.age;
					userinfo.education = this.myInfo.education;
					userinfo.marriage = this.myInfo.marriage;
					userinfo.height = this.myInfo.height;
					userinfo.income = this.myInfo.income;
					userinfo.occupation = this.myInfo.occupation;
					userinfo.house = this.myInfo.house;
					userinfo.charm = this.myInfo.charm;
					userinfo.blood = this.myInfo.blood;
					userinfo.place = this.myInfo.place;
					userinfo.cohabitation = this.myInfo.cohabitation;
				}
				if (url == 'requirement') {
					userinfo.is_request = this.myInfo.is_request;
				}
				if (url == 'tag') {
					userinfo.tag = this.myInfo.tag;
					userinfo.like_tag = this.myInfo.like_tag;
				}
				if (url == 'rose') {
					userinfo.rose = this.myInfo.rose;
				}
				if (url == 'dynamics') {
					uni.navigateTo({
						url: '../dynamics/dynamics_list?type=my&userinfo=' + JSON.stringify(userinfo)
					})
				} else {
					uni.navigateTo({
						url: url + '?userinfo=' + JSON.stringify(userinfo)
					})
				}
			},
			
			getAvatarUrl: function (value) {
				return value.indexOf(this.QINIUURL) == -1 ? value : value + '?imageView2/1/w/100/h/100'
			},
		},
		filters: {
			isInfo(value) {
				if (!!value.occupation) {
					return '已完善';
				} else {
					return '需完善';
				}
			},
			isRequirement(value) {
				if (!!value.is_request && value.is_request.income!='0') {
					return '已完善';
				} else {
					return '需完善';
				}
			},
			isTag(value) {
				if (!!value.tag) {
					return '已完善';
				} else {
					return '需完善';
				}
			},
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	page{
		background: linear-gradient(left,rgba(248,201,217,.6),rgba(210,248,243,.6));
	}
	.status-bar {
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}
	.user-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: var(--status-bar-height); 
		padding: 40rpx;
		background: linear-gradient(left,rgba(248,201,217,.6),rgba(210,248,243,.6));
		.user-avatar {
			position: relative;
			.avatar {
				display: block;
				width: 150rpx;
				height: 150rpx;
				border-radius: 150rpx;
			}
			.checking {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 150rpx;
				background-color: rgba(0,0,0,0.5);
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				text {
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
		.user-info {
			flex: 1;
			margin: 0 10rpx;
			.name {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.name-text {
					font-size: 32rpx;
					color: #333;
				}
				.vip-icon {
					width: 64rpx;
					height: 21rpx;
					margin-left: 10rpx;
				}
				.role {
					height: 22rpx;
					line-height: 22rpx;
					padding: 0 10rpx;
					border: 1rpx solid #f04585;
					border-radius: 6rpx;
					margin-left: 10rpx;
					font-size: 16rpx;
					color: #f04585;
				}
			}
			.info {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin: 5rpx 0;
			}
			.sex-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 28rpx;
				padding: 5rpx 10rpx;
				border-radius: 28rpx;
				&.sex1 {
					background: #83d7ff;
				}
				&.sex2 {
					background: #fe9ab7;
				}
				.sex-icon {
					width: 28rpx;
					height: 28rpx;
				}
				.age {
					font-size: 28rpx;
					color: #fff;
					margin-left: 5rpx;
				}
			}
			.city-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 28rpx;
				padding: 5rpx 10rpx;
				border-radius: 28rpx;
				background: #4cbcfc;
				margin-left: 10rpx;
				.city-icon {
					width: 28rpx;
					height: 28rpx;
				}
				.city {
					font-size: 28rpx;
					color: #fff;
					margin-left: 5rpx;
				}
			}
			.id {
				font-size: 32rpx;
				color: #999;
			}
		}
		.uni-icon {
			font-size: 40rpx;
			color: #999;
		}
	}
	.authWrapSuperior{
		display: flex;
		width: 750rpx;
		justify-content: center;
		background: linear-gradient(left,rgba(248,201,217,.6),rgba(210,248,243,.6));
	}
	.auth-wrap {
		width: 686rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		// padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 18rpx;
		.auth-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			.auth-icon {
				width: 80rpx;
				height: 80rpx;
			}
			text {
				font-size: 28rpx;
				color: #333;
			}
			&.active {
				text {
					color: #FF76A8;
				}
			}
		}
	}
	.menu-list>view:first-child{
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
		}
	.menu-list>view:last-child{
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}
	.menu-list {
		width: 686rpx;
		// border-radius: 20rpx;
		// border-top: 1rpx solid #f5f5f5;
		// background-color: #0ee;
		margin-bottom: 20rpx;
		.menu-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 30rpx;
			background-color: #fff;
			& + .menu-item {
				border-top: 1rpx solid #f5f5f5;
			}
			.menu-icon {
				width: 40rpx;
				height: 40rpx;
			}
			.label {
				font-size: 30rpx;
				color: #333;
				margin-left: 10rpx;
			}
			.value {
				flex: 1;
				font-size: 28rpx;
				color: #999;
				margin: 0 10rpx;
				text-align: right;
				&.red {
					color: #FF71A5;
				}
			}
			.uni-icon {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>
